<template>
  <div>
    <input type="button" value="浪起来" @click="qidong" />
    <input type="button" value="停止" @click="tingzhi" />
    <h2>{{ msg }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我拿buff，谢谢~",
    };
  },
  methods: {
    qidong() {
      if (this.intervalId !== null) return;

      this.intervalId = setInterval(() => {
        const header = this.msg.slice(0, 1);
        const body = this.msg.slice(1);
        this.msg = body + header;
      }, 300);
    },
    tingzhi() {
      clearInterval(this.intervalId);
      this.intervalId = null;
    },
  },
};
</script>

<style scoped></style>
